<template>
  <div class="dialog-container">
    <el-dialog
      title="用户信息"
      :visible.sync="dialogFormVisible"
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="form-container">
        <el-form ref="form" label-position="top">
          <el-row :gutter="20">
            <el-col :span="24">
              <editor v-model="content" lang="java" theme="chrome" width="100%" height="200" @init="editorInit" />
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import vue2AceEditor from 'vue2-ace-editor'

import 'brace/ext/language_tools'
import 'brace/ext/searchbox'
import 'brace/ext/emmet'
import 'brace/mode/java'
import 'brace/theme/chrome'
import 'brace/snippets/javascript'

export default {
  components: {
    editor: vue2AceEditor
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // ----------------------弹框部分-------------------------
      loading: false,
      dialogFormVisible: false,
      content: ''
    }
  },
  created() {},
  methods: {
    editorInit: function (editor) {
      editor.on('change', this.change)
      editor.commands.addCommand({
        name: 'formatter',
        bindKey: { win: 'Ctrl-Shift-F', mac: 'Command-Shift-F' },
        exec: () => this.$emit('formatter', this.editor)
      })
      editor.completers = [{
        getCompletions: function(editor, session, pos, prefix, callback) {
          this.setCompletions(editor, session, pos, prefix, callback)
        }
      }]
      this.editor = editor
    },
    setCompletions(editor, session, pos, prefix, callback) {
      const data = [
        { caption: 'public', meta: '公共的', value: 'public' },
        { caption: 'private', meta: '私有的', value: 'private' }
      ]
      if (prefix.length === 0) {
        return callback(null, [])
      } else {
        callback(null, data)
      }
    },
    change: function() {
      setTimeout(() => {
        this.$emit('editor-change', this.codeContent_)
      }, 10)
    },
    onOpen() {
      // 重置表单内容
      this.resetForm()
    },
    resetForm() {
      this.$nextTick(() => {
      })
    },
    onOpened() {
    },
    onClose() {
    },
    onClosed() {
    },
    onSubmit() {
      console.log(this.content)
    }
  }
}
</script>
